<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link th:href="@{/frontstatic/css/iconfont.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/global.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap-theme.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/swiper.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/styles.css}" rel="stylesheet">
    <script charset="utf-8" th:src="@{/lib/layui-v2.6.3/layui.js}"></script>
    <link media="all" rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}">
    <script charset="utf-8" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/jquery.DJMask.2.1.1.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify_stand.js}"></script>
    <title>我的订单</title>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{head::headdeg}"></div>
<!-- 顶部标题 -->
<div class="bgf5 clearfix">
    <div class="top-user">
        <div class="inner">
            <div class="title">个人中心</div>
        </div>
    </div>
</div>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="pull-left bgf">
            <dl class="user-center__nav">
                <dt>帐户信息</dt>
                <a href="/skippage?url=udai_setting">
                    <dd>个人资料</dd>
                </a>
                <a href="/skippage?url=udai_address">
                    <dd>收货地址</dd>
                </a>
            </dl>
            <dl class="user-center__nav">
                <dt>订单中心</dt>
                <a href="/skippage?url=udai_order">
                    <dd class="active">我的订单</dd>
                </a>
                <a href="/skippage?url=udai_refund">
                    <dd>售后</dd>
                </a>
            </dl>
        </div>
        <div class="pull-right">
            <div class="user-content__box clearfix bgf">
                <div class="title">订单中心-我的订单</div>
                <div class="order-list__box bgf">
                    <div class="order-panel">
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="all" role="tabpanel">
                                <table class="layui-table" id="orderTable" lay-filter="orderTable" lay-skin="nob"></table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</div>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
</body>
<script type="text/html" id="titleTpl">
    <td>
        <span style="color: #a5a3a3">订单编号：{{d.orderUUID}}</span>
    {{# layui.each(d.steamShopingDataList, function(index, item){ }}
       <div>
           <div style="display: inline-block">
               <img src="{{item.image}}">
           </div>
           <div style="display: inline-block">
               <span>{{item.cname}}</span><br/>
               <span style="color: #827f7f">{{item.csku}}</span>
           </div>
       </div><br/>
    {{#  });}}
    </td>
</script>
<script id="barlist" type="text/html">
    <a  lay-event="byid">查看</a>
    <a  style="background-color: #0C0C0C;color: #FFFFFF;width: 100px;margin-right: 40px"lay-event="del">删除</a>
    {{#  if(d.staticSlot == 0){ }}
    <a  lay-event="pay" >去付款</a>
    {{#  } }}
    {{#  if(d.staticSlot == 2){ }}
    <a  lay-event="sign" >确认签收</a>
    {{#  } }}
    {{#  if(d.staticSlot == 3){ }}
    <a  lay-event="edit" >去评价</a>
    {{#  } }}
    {{#  if(d.staticSlot <5){ }}
    <a  lay-event="afterSale" style="color: #7d7c7c">申请售后</a>
    {{#  } }}
</script>
<script>
    var notify;
    layui.use(['notify'],function(){
        notify=layui.notify;
    })
    layui.use('table', function () {
        var table = layui.table;
        var layer = layui.layer;
        table.render({
            elem: '#orderTable'
            , method: 'post'
            , title: '订单表'
            , url: '/order/page' //数据接口
            , page: {theme: '#585a5c'}
            ,contentType:'application/json'
            , limit: 5
            ,skin:"line"
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records//解析数据列表
                };
            }
            , cols: [
                [ //表头
                     {field: 'steamShopingDataList',hide:true,width:500,templet: '#titleTpl'}
                    , {field: 'prcies',width: 110}
                    , {field: 'orderStatic',width: 150}
                    , {field: 'createTime',width: 200}
                    , {fixed: 'right', toolbar: '#barlist',width: 250}
            ]
            ]
        });
        //监听行工具事件
        table.on('tool(orderTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'byid'){
               window.location.href="/skippage?url=udai_order_detail&id="+data.orderId;
            } else if(obj.event === 'del'){
                $.get("/order/del",{"id":data.orderId},function (e) {
                    if (e.code==0) {
                        notify.success(e.msg)
                       location.reload();
                    }else {
                        notify.error(e.msg)
                    }
                })
            }else if(obj.event === 'pay'){
                //付款
                $.get("/order/pay",{"id":data.orderId},function (e) {
                    if (e.code==0) {
                        const div =document.createElement('divform')
                        div.innerHTML=e.data;
                        document.body.appendChild(div);
                        document.forms[0].submit();
                    }else {
                        notify.error(e.msg)
                    }
                })

            }else if(obj.event === 'sign'){
                //签收
                $.get("/order/byidUpdate",{"id":data.orderId,"statics":3},function (e) {
                    if (e.code==0) {
                        notify.success(e.msg)
                        location.reload();
                    }else {
                        notify.error(e.msg)
                    }
                })

            }else if(obj.event === 'edit'){
                //评价
                window.location.href="/skippage?url=order_evaluate&id="+data.orderId
            }else if (obj.event === "afterSale") {
                //申请售后
                window.location.href="/skippage?url=udai_apply_return&id="+data.orderId

            }
        });
    })
</script>
</html>